<template>
	<view class="c-content">
		<view class="empty" v-if="isShow">
			<empty></empty>
		</view>
		<view class="c-list">
			<view class="c-item" v-for="item in caseList" :key="item.id">
				<view class="item-info r-flex">
					<view style="margin-top: 3px;">
						<u-icon name="file-text" color="#b4b7bb" size="20"></u-icon>
					</view>
					<view class="c-info" @click="caseProcess(item)">
						<view class="title">
							{{item.name}}
							<text class="status" v-if="item.status == '立案'"
								style="color: #FD7840">{{item.status}}</text>
							<text class="status" v-if="item.status == '结案'"
								style="color: #b4b7bb">{{item.status}}</text>
							<text class="status" v-if="item.status == '审判中'"
								style="color: #1C5AD2">{{item.status}}</text>
							<text class="status" v-if="item.status == '材料准备'"
								style="color: #1C5AD2">{{item.status}}</text>
							<text class="status" v-if="item.status == '裁判'"
								style="color: #FD7840">{{item.status}}</text>
						</view>
						<view class="dec">{{item.cause}}</view>
						<view class="nature r-flex">
							<text class="nature-l">{{item.caseType}}</text>
							<text class="nature-l">{{item.procedure}}</text>
						</view>
					</view>
					<view @click="caseCancel(item.id)" style="margin-top: 3px;">
						<u-icon name="more-circle" color="#ccc" size="20"></u-icon>
					</view>
				</view>
				<view class="item-pay r-flex">
					<view class="pay-l r-flex">
						<u-icon name="account" color="#ccc" size="16"></u-icon>
						<text class="person">办理人员：罗先生</text>
					</view>
					<view class="pay-l r-flex">
						<u-icon name="rmb-circle" color="#ccc" size="16"></u-icon>
						<text class="person">标的额：{{toThousands(item.fee)}}</text>
					</view>
				</view>
			</view>
			<u-popup :show="cancelShow" mode="bottom" @close="cancelClose">
				<view class="cancel-item" @click="cancel()">
					<text style="color: #FD7840;">删除案件</text>
				</view>
				<u-gap height="8" bgColor="#f7f6fa"></u-gap>
				<view class="cancel-item" @click="cancelShow=false">
					<text>取消</text>
				</view>
			</u-popup>
			<u-modal :content="content" :show="confirmShow" confirmColor="#FD7840" showCancelButton
				:closeOnClickOverlay="false" @confirm="confirmCancel" @cancel="confirmShow=false"
				@close="close"></u-modal>
			<view class="add-case r-flex" @click="addCase()">
				<u-icon name="plus" color="#fff" size="24"></u-icon>
			</view>
			<view class="divide-line" v-if="this.caseList.length != 0">
				<u-divider text="我是有底线的"></u-divider>
			</view>
		</view>
		<view class="isLogin">
			<u-modal :content="modelText" :show="modelShow" confirmText="立即登录" confirmColor="#1C5AD2"
				:closeOnClickOverlay="false" @confirm="confirmTo()"></u-modal>
		</view>
	</view>
</template>

<script>
	import {
		deleteRequest
	} from '@/utils/request'
	import empty from "@/components/empty/empty.vue";
	export default {
		components: {
			empty
		},
		data() {
			return {
				caseList: [],
				cancelShow: false,
				confirmShow: false,
				content: "此操作将删除该条案件，确认删除？",
				caseId: "",
				modelText: "访问此资源需要完全的身份验证～",
				modelShow: false,
				caseIcon: '/static/images/case.png',
			}
		},
		computed: {
			isShow() {
				return this.caseList.length == 0;
			}
		},
		// 监听页面显示，刷新页面数据
		onShow() {
			if (!uni.getStorageSync('OPEN-ID')) {
				// 如果未登录，则跳转到登录页面
				this.modelShow = true;
				this.caseList = [];
				uni.hideTabBar();
			} else {
				this.modelShow = false;
				uni.showTabBar();
			}
			this.baseListRequest();
		},
		mounted() {
			this.baseListRequest();
		},
		methods: {
			baseListRequest() {
				const that = this;
				let data = {};
				uni.showLoading({
					title:"加载中"
				})
				this.$sendRequest.getCaseList(data).then((res) => {
					if (res.code == 200) {
						this.caseList = res.data;
					} else {
						this.$refs.uToast.show({
							message: res.message,
							type: 'error',
						})
					}
				}).catch(err => {})
				uni.hideLoading();
			},
			addCase() {
				uni.navigateTo({
					url: "/pages/caseList/addCase"
				})
			},
			caseProcess(item) {
				uni.navigateTo({
					url: "/pages/caseList/caseProcess" + "?id=" + item.id
				})
			},
			caseCancel(val) {
				this.cancelShow = true;
				this.caseId = val;
			},
			cancelClose() {
				this.cancelShow = false;
			},
			cancel() {
				this.cancelShow = false;
				this.confirmShow = true;
			},
			confirmCancel() {
				const that = this;
				// 替换为你的API请求路径
				const url = "/api/case/delete/" + this.caseId;
				deleteRequest(url, {}).then((res) => {
						if (res.code == 200) {
							this.confirmShow = false;
							this.baseListRequest();
						} else {
							this.$refs.uToast.show({
								message: res.message,
								type: 'err',
							})
						}
					})
					.catch((err) => {});
			},
			confirmTo() {
				uni.redirectTo({
					url: "/pages/login/landPage"
				})
			},
			// 数据格式化1000-1,000
			toThousands(num) {
				var num = (num || 0).toString(),result = "";
				while(num.length > 3) {
					result=',' + num.slice(-3) + result;
					num = num.slice(0,num.length - 3);
				}
				if(num) {
					result = num + result;
				}
				return result;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.c-item {
		margin-top: 30rpx;
		width: 100%;
		padding: 40rpx 0 0;
		background-color: #fff;
		box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(231, 235, 243, 0.3);

		.item-info {
			padding: 0 30rpx;
			align-items: flex-start;

			.c-info {
				margin-left: 10rpx;
				padding-bottom: 24rpx;
				padding-right: 12rpx;
				flex: 1;

				.title {
					font-size: 32rpx;
					font-weight: bold;

					.status {
						margin-left: 10rpx;
					}
				}

				.dec {
					margin: 12rpx 0;
					color: #b4b7bb;
				}

				.nature {
					font-size: 26rpx;
					.nature-l {
						border-radius: 10rpx;
						padding: 8rpx 10rpx;
						color: #1C5AD2;
						background-color: #E3EAFF;
					}
					.nature-l:nth-child(2) {
						color: #FD7840;
						background-color: #FFEAE2;
						margin-left: 16rpx;
					}
				}
			}
		}

		.item-pay {
			border-top: solid 1px #f4f4f4;
			align-items: center;
			padding: 16rpx 74rpx;

			.pay-l {
				width: 50%;
				padding-right: 24rpx;
				align-items: center;

				.person {
					margin-left: 10rpx;
					font-size: 24rpx;
					color: #b4b7bb;
				}
			}
		}
	}

	.add-case {
		position: fixed;
		right: 50rpx;
		bottom: 100rpx;
		width: 90rpx;
		height: 90rpx;
		background: #1C5AD2;
		box-shadow: 0px 0px 24px 0px rgba(68, 145, 198, 0.3);
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		z-index: 10;
	}

	.cancel-item {
		padding: 30rpx 30rpx;
		text-align: center;
		border-bottom: solid 2rpx #eaebec;
	}

	.divide-line {
		padding: 10rpx 0;
	}

	.c-list /deep/ .u-modal,
	.isLogin /deep/ .u-modal {
		text-align: center;
	}

	.empty {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
	}
</style>